<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>手机端导航</title>
	<style>
*{margin:0;padding:0;}
body{color:#585a5b;font:normal 18px/1.5 tahoma,"Microsoft YaHei","Arial Unicode MS",Mingliu,Arial,Helvetica;}
.box_850 a{color:#fff;text-decoration:none;}
.box_850 a:hover{text-decoration:none;}
.box_850{width:100%;}
.box_850 .hide-box{position:relative;z-index:1;height:60px;}
.box_850 .header{position:fixed;top:0;left:0;z-index:100;box-sizing:border-box;padding:0 25px;width:100%;height:60px;background:#2c8dd3;background-image:url(/ufile/38554/logo0.png);background-position:50% 50%;background-size:270px;background-repeat:no-repeat;font-size:14px;line-height:60px;}
.box_850 .header:after{clear:both;display:block;height:0;content:"";font-size:0;}
.box_850 .header .menu{position:relative;float:left;width:50px;height:100%;}
.box_850 .header .menu .line{position:absolute;left:0;display:block;width:30px;height:1px;background:#fff;-webkit-transition:all ease-in-out .5s;-moz-transition:all ease-in-out .5s;transition:all ease-in-out .5s;}
.box_850 .menu .line1{top:20px;}
.box_850 .menu .line2{top:30px;}
.box_850 .menu .line3{top:40px;}
.box_850 .header .active .line1{-webkit-transform:rotate(45deg) translate(2px,12px);-moz-transform:rotate(45deg) translate(2px,12px);transform:rotate(45deg) translate(2px,12px);}
.box_850 .header .active .line2{opacity:0;-webkit-transform:translateX(100%);-moz-transform:translateX(100%);transform:translateX(100%);}
.box_850 .header .active .line3{-webkit-transform:rotate(-45deg) translate(2px,-12px);-moz-transform:rotate(-45deg) translate(2px,-12px);transform:rotate(-45deg) translate(2px,-12px);}
.box_850 .header .to_home{float:right;width:25px;height:100%;}
.box_850 .header .to_home img{margin-top:16px;width:100%;}
.box_850 .navbar{position:fixed;top:60px;bottom:0;left:0;z-index:98;display:none;box-sizing:border-box;padding:0 25px 0;width:100%;border-bottom:1px solid #e89745;background:#2c8dd3;}
.box_850 .navbar .a-wrap .a-list{display:block;width:100%;height:60px;border-bottom:1px solid #eee;font-size:14px;line-height:60px;-webkit-transition:width ease .4s;-moz-transition:width ease .4s;transition:width ease .4s;}
.box_850 .navbar .a-wrap .a-list:last-child{border-bottom:none;}
.box_850 .navbar .active .a-list{width:40%;}
.box_850 .navbar .active .a-list:nth-child(1){-webkit-transition-delay:.1s;-moz-transition-delay:.1s;transition-delay:.1s;}
.box_850 .navbar .active .a-list:nth-child(2){-webkit-transition-delay:.2s;-moz-transition-delay:.2s;transition-delay:.2s;}
.box_850 .navbar .active .a-list:nth-child(3){-webkit-transition-delay:.3s;-moz-transition-delay:.3s;transition-delay:.3s;}
.box_850 .navbar .active .a-list:nth-child(4){-webkit-transition-delay:.4s;-moz-transition-delay:.4s;transition-delay:.4s;}

	</style>
</head>
<body>

<div class="box831_-8867">
    <div class="box_850">
	    <div class="hide-box"></div>
        <div class="header" style="background-image:url(http://m.dghongxia.com/uFile/86230/mobile/20181029151658280.png);background-position: 50% 50%;background-repeat: no-repeat;">
            <div class="menu">
                <span class="line line1"></span>
                <span class="line line2"></span>
                <span class="line line3"></span>
            </div>
            <a href="index.html" class="to_home">
                <img src="http://m.dghongxia.com/mfile/831/image/home_m.png" />
            </a>
        </div>
        <div class="navbar">
            <div class="a-wrap active">
                <a href='###' title="网站首页" class="a-list">网站首页</a>
                <a href='###' title="关于我们" class="a-list">关于我们</a>
                <a href='###' title="产品中心" class="a-list">产品中心</a>
                <a href='###' title="行业资讯" class="a-list">行业资讯</a>
                <a href='###' title="联系我们" class="a-list">联系我们</a>
            </div>
        </div>
    </div>
</div>
<script src="//lib.baomitu.com/jquery/2.2.0/jquery.min.js"></script>
<script>
$(function () {
    $('.menu').click(function () {
        $(this).toggleClass('active');
        $('.a-wrap').toggleClass('active');
        $('.navbar').slideToggle(500);
    })
})
</script>
</body>
</html>